<template>
<transition name='bounce'>
    <div class="login" > 
        <img src="@/assets/img/loginbg.png" alt="" srcset="" class="login-img">
        <div class="form">
            <div class="form-cont">   
                <p class="login-title">登录 / 注册</p>
                <van-row type="flex" class="form-group">
                    <van-col span="4"><span class="fa fa-user form-icon"></span></van-col>
                    <van-col span="20">
                        <input type="text" v-model="username" class="form-control" maxlength="16" placeholder="USERNAME" autocomplete="off">
                    </van-col>
                </van-row>
                <van-row type="flex" class="form-group">
                    <van-col span="4"><span class="fa fa-lock form-icon"></span></van-col>
                    <van-col span="20">
                        <input type="password" v-model="password" class="form-control" maxlength="16" placeholder="PASSWORD" autocomplete="off">
                    </van-col>
                </van-row>
                <van-button size="large" class="loginBtn">登录</van-button>
                <van-row type="flex" class="gotoRegister">
                    <van-col span="24">
                        没有账号? <a>去注册</a> 
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</transition>      
</template>

<script lang='ts'>
  import Login from './LoginControl';
  export default Login;
</script>

<style lang="less" scoped>
    .login{
        height: 100%;
        background: #EFEFEF;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        .login-img{
            width: 100%;
            height: 100%;
            }
        .form{
            width: 90%;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            padding: 7px;
            }
            .form-icon{
             height: 45px;
             line-height: 45px;
             color:#aaa;
             font-size: 20px;
            }
            .form-cont{
                padding: 8px;
                }
                .login-title{
                    letter-spacing: 1px;
                    font-size: 20px;
                    margin: 0 0 30px 0;
                    color: #000000;
                    }
                .form-group{
                    margin-bottom: 10px;
                    border:1px solid #a1a1a1;
                    border-radius: 5px;
                    }
                    .van-button{
                        height: 45px;
                        line-height: 45px;
                        font-size: 14px;
                        padding: 0 15px;
                        }
                    .form-control{
                        font-size: 14px;
                        font-weight:300;
                        width:95%;
                        display:block;
                        height: 45px;
                        line-height: 45px;
                        padding-left: 15px;
                        padding-right: 0;
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
                        -o-box-shadow: none;
                        box-shadow: none;
                        -webkit-border-radius: 0px;
                        -moz-border-radius: 0px;
                        -ms-border-radius: 0px;
                        border-radius: 0px;
                        -moz-transition: all 0.3s ease;
                        -o-transition: all 0.3s ease;
                        -webkit-transition: all 0.3s ease;
                        -ms-transition: all 0.3s ease;
                        transition: all 0.3s ease;
                        font-family: "Open Sans", Arial, sans-serif!important;
                        color: #555;
                        border: none;
                        background:rgba(255,255,255,0.5)
                        }
                        &:focus{
                            border-bottom: 1px solid rgba(0, 0, 0, 0.4)
                            } 
                    .btn-primary{
                        height: 50px;
                        padding-right: 20px;
                        padding-left: 20px;
                        border: none;
                        background: #33cccc;
                        color: #ffffff;
                        box-shadow: -1px 5px 10px -1px rgba(51, 204, 204, 0.4);
                        display: inline-block;
                        padding: 6px 12px;
                        margin-bottom: 0;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.42857143;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: middle;
                        display: inline-block;
                        padding: 6px 14px;
                        margin-bottom: 0;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.42857143;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: middle;
                        -ms-touch-action: manipulation;
                        touch-action: manipulation;
                        cursor: pointer;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        background-image: none;
                        border: 1px solid transparent;
                        border-radius: 4px;
                        }
                    .reg{
                        box-shadow: -1px 5px 10px -1px rgba(255, 0, 128, 0.4); 
                        }        
    }
                    
</style>

